<template>
  <div class="graph-form">
    <div class="node-name">
      <span>名称</span>
      <el-input v-model="localNodeName" maxlength="20" show-word-limit />
    </div>
    <div class="node-knowledge">
      <span>知识点</span>
      <MdEditor
        v-model="localNodeKnowledge"
        :footers="[]"
        :toolbars="toolbars"
        :preview="false"
        class="knowledge-editor"
        :maxLength="50000"
      />
    </div>
    <el-button class="saveBtn" @click="saveFn()">保存</el-button>
  </div>
</template>

<script>
export default {
  props: {
    nodeName: {
      type: String,
      default: "",
    },
    nodeKnowledge: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      localNodeName: "",
      localNodeKnowledge: "",
      toolbars: [
        "bold",
        "underline",
        "italic",
        "strikeThrough",
        "katex",
        "link",
        "image",
        "table",
        "preview",
      ],
    };
  },
  watch: {
    nodeName: {
      handler(newVal) {
        this.localNodeName = newVal;
      },
      immediate: true,
    },
    nodeKnowledge: {
      handler(newVal) {
        this.localNodeKnowledge = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    saveFn() {
      this.$emit("saveKnowledge", this.localNodeName, this.localNodeKnowledge);
    },
  },
};
</script>

<style lang="scss" scoped>
.graph-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px 40px;
  width: 100%;
  background: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  .node-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 20px;
    span {
      flex-shrink: 0;
      font-size: 14px;
      color: #596184;
      margin-bottom: 13px;
    }
  }
  .node-knowledge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 20px;
    :deep(.el-textarea__inner) {
      height: 263px;
    }
    span {
      flex-shrink: 0;
      font-size: 14px;
      color: #596184;
      margin-bottom: 13px;
    }
    .knowledge-editor {
      width: 100%;
      height: 100% !important;
      min-height: 263px;
      max-height: 350px;
      overflow-y: auto;

      :deep(.md-editor-resize-operate) {
        display: none !important;
      }
    }
  }
  .saveBtn {
    background-color: #155eef;
    color: #fff;
  }
}
</style>